<template>
  <el-dialog v-model="isShowDialog"
             :before-close="handleClose"
             :title="title"
             draggable
             :width="isView?'70%':'800px'"
             append-to-body
  >
    <div  v-loading="loading">
      <el-form :model="saveParams" ref="formRef" :disabled="isView" label-width="100px" :rules="rules">
        <div style="display: flex;flex-wrap: wrap">
          <el-col :span="12">
            <el-form-item label="库位编码" prop="locationCode">
              <el-input v-model="saveParams.locationCode"
                        @input="saveParams.locationCode=limitCharAndNumber(saveParams.locationCode)"
                        placeholder="库位编码" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库位位置">
              <el-input v-model="saveParams.locationName" disabled placeholder="自动生成" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属仓库" prop="warehouseId">
              <el-select v-model="saveParams.warehouseId"
                         :disabled="saveParams.locationId"
                         style="width: 100%" clearable
                         placeholder="所属仓库"
                         @change="changeWarehouse"
              >
                <template v-for="(item,index) in warehouseList" :key="index">
                  <el-option :label="item.warehouseName" :value="item.warehouseId"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属库区" prop="areaId">
              <el-select v-model="saveParams.areaId" style="width: 100%"
                         :disabled="saveParams.locationId"
                         clearable
                         placeholder="所属库区">
                <el-option
                    v-for="item in areaList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货架号">
              <el-input v-model="saveParams.rackNo" @input="saveParams.rackNo=limitCharAndNumber(saveParams.rackNo)"
                        placeholder="货架号" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存上限" prop="maxNum">
              <el-input v-model="saveParams.maxNum" placeholder="库存上限"
                        @input="saveParams.maxNum=limitIntNumber(saveParams.maxNum)" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大承重" prop="maxWeight">
              <el-input v-model="saveParams.maxWeight"
                        @input="saveParams.maxWeight=limitNumber(saveParams.maxWeight)" placeholder="最大承重" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排" prop="locRow">
              <el-input v-model="saveParams.locRow" placeholder="排"
                        @input="saveParams.locRow=limitNumber(saveParams.locRow)" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="层" prop="locLayer">
              <el-input v-model="saveParams.locLayer" placeholder="层"
                        @input="saveParams.locLayer=limitNumber(saveParams.locLayer)" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="号" prop="locNo">
              <el-input v-model="saveParams.locNo" placeholder="号"
                        @input="saveParams.locNo=limitNumber(saveParams.locNo)" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select
                  style="width: 100%;"
                  clearable
                  placeholder="状态"
                  v-model="saveParams.status"
              >
                <el-option label="启用" :value="0"></el-option>
                <el-option label="停用" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="saveParams.remark" placeholder="备注" clearable/>
            </el-form-item>
          </el-col>
        </div>

      </el-form>
      <div v-if="isView">
        <div class="justify-content items-center" style="margin-bottom: 15px">
          <div class="plan">
            <span class="information"></span>
            <span class="informationText">已关联SKU信息</span>
          </div>
        </div>
        <vxe-table
            border
            show-overflow
            style="margin-top: 20px;"
            align="center"
            :data="tableList"
            height="300"
            :row-config="{isCurrent: true, isHover: true}"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="skuCode" width="160" title="云仓SKU编码"></vxe-column>
          <vxe-column field="skuName" width="220" title="商品名称"></vxe-column>
          <vxe-column field="coverUrl" width="180" title="商品图片">
            <template #default="{row}">
              <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl"></ImagePreview>
            </template>
          </vxe-column>
          <vxe-column field="classifyName" width="120" title="商品分类"></vxe-column>
          <vxe-column field="attrName" width="120" title="属性"></vxe-column>
          <vxe-column field="brand" width="120" title="品牌"></vxe-column>
          <vxe-column field="barcode" width="120" title="条码"></vxe-column>
          <vxe-column field="earlyWarnDay" width="120" title="商品预警天数"></vxe-column>
          <vxe-column field="returnDay" width="120" title="商品退货天数"></vxe-column>
          <vxe-column field="unitType" width="100" title="单位"></vxe-column>
          <vxe-column field="weight" width="100" title="重量kg"></vxe-column>
          <vxe-column field="volume" width="100" title="体积m3"></vxe-column>
          <vxe-column field="length" width="80" title="长cm"></vxe-column>
          <vxe-column field="width" width="80" title="宽cm"></vxe-column>
          <vxe-column field="height" width="80" title="高cm"></vxe-column>
          <vxe-column field="price" width="80" title="售价¥"></vxe-column>
          <vxe-column field="tagPrice" width="80" title="吊牌价¥"></vxe-column>
          <vxe-column field="createByName" width="120" title="操作人"></vxe-column>
          <vxe-column field="createTime" width="180" title="操作时间"></vxe-column>
        </vxe-table>
      </div>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="clickSave" v-if="!isView"> 保存 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
    </template>

  </el-dialog>
</template>

<script setup>
import {areaGetFilter, getLocationSkuList, locationSave, warehouseGetFilter} from "@/api/scApi";
import {getCurrentInstance, onMounted} from "vue";
import {limitCharAndNumber} from "@/utils/shuangcheng";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {getWarehouseSelect} from "@/api/system/user";

const {proxy} = getCurrentInstance();
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false
  },
  title: {type: String},
  rowData: {type: Object},
  isView: {type: Boolean},
  kwId: {type: String}
})
const emits = defineEmits(['cancel'])
let loading=ref(false)
function handleClose() {
  emits('cancel')
}

let saveParams = ref({})
onMounted(() => {

  if (props.kwId) {
    getTableList(props.kwId)
  }
  getWarehouse().then(() => {
    saveParams.value = JSON.parse(JSON.stringify(props.rowData))
    if (!saveParams.value.status) {
      saveParams.value.status = 0
    }
    getAreaListFiter()

  })
})

// 表单校验
const rules = ref({
  locationCode: [{required: true, message: "库区编码不能为空", trigger: "blur"}],
  warehouseId: [{required: true, message: "所属仓库不能为空", trigger: "change"}],
  areaId: [{required: true, message: "所属库区不能为空", trigger: "change"}],
  maxNum: [{required: true, message: "库存上限不能为空", trigger: "blur"}],
  locRow: [{required: true, message: "排不能为空", trigger: "blur"}],
  locLayer: [{required: true, message: "层不能为空", trigger: "blur"}],
  locNo: [{required: true, message: "号不能为空", trigger: "blur"}],
});

function clickSave() {
  proxy.$refs.formRef.validate((valid, fileds) => {
    if (valid) {
      locationSave(saveParams.value).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess('保存成功')
          emits('cancel', true)
        }
      })
    }
  })
}

const sysUserInfo = JSON.parse(localStorage.getItem("userInfo"))
let warehouseList = ref([])

//获取仓库
function getWarehouse() {
  return new Promise(resolve => {
    loading.value =true
    getWarehouseSelect({'companyId': sysUserInfo.companyId}).then(res => {
      loading.value =false
      warehouseList.value = res.data
      resolve()
    })
  })
}

function changeWarehouse() {
  areaList.value=[]
  saveParams.value.areaId =''
  getAreaListFiter()
}

//获取库区
let areaList = ref([])
function getAreaListFiter() {
  areaGetFilter({
    status: 0,
    'companyId': sysUserInfo.companyId,
     'warehouseId':saveParams.value.warehouseId,
    'zones':[20],//后端让固定写死
  }).then(res => {
    if (res.code === 200) {
      areaList.value = res.data.map(item => {
        item.value = item.areaId
        item.label = item.areaName
        return item
      })
    }
  })

}

//已关联SKU表格数据
let tableList = ref([])

//获取关联SKU列表
function getTableList(kwId) {
  getLocationSkuList({'locationId': kwId}).then(res => {
    if (res.code === 200) {
      tableList.value = res.data
    }
  })
}

</script>

<style scoped lang="scss">

</style>